<template>
	<view class="content">
		<page-container :overlay="false" :show="isShowPage" @beforeleave="beforeleave"
			custom-style="height:100vh;overflow:scroll">

			<view class="flex items-center flex-center paddingTop-30" v-if="list.length!=0">
				<view class="line_progress">
					<up-line-progress :percentage="Math.ceil((num/waitWordcount)*100)" :showText="false"
						activeColor='#51D580' inactiveColor='#EBEBEB' height="8rpx"></up-line-progress>
				</view>
				<view class="line_num">
					{{num}}/{{waitWordcount}}
				</view>
			</view>
			<view class="box">
				<view class="box_title">
					{{wordHead}}
				</view>
			
				<m-drag :item-height="60" :list="tran" @change="dragComplete" >
					<template #default="{ item }">
						<view class="name">{{item.value}}({{ item.label }})</view>
					</template>
				</m-drag>
			</view>
			<view class="pos" >
				<view class="warn flex  flex-center">
					<image src="../../static/alarm-icon.png" mode="" class="warn_img"></image>
					<view class="warn_title">
						根据能够帮助自己记忆作用的大小，从上到下进行排序
					</view>
				</view>
			<!-- 	<view class="btn" @click="nextClick()">
					继续
				</view> -->
				<view class="btn" @click="nextClick2()">
					下一个
				</view>
			</view>
		<!-- 	<view class="pos" v-if="list2.length!=0">
				<view class="btn" @click="nextClick2()">
					下一个
				</view>
			</view> -->

		</page-container>
		<up-popup :show="errorshow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
您还未选出该词的特殊点/记忆顺序哟！点击“确定”将拆解下个单词
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="cancel2">
						取消
					</view>
					<view class="popup_sure" @click="confirm2">
						确认
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">

					别放弃，坚持就是胜利!后面的训练趣味十足。
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="cancel">
						取消
					</view>
					<view class="popup_sure" @click="confirm">
						确认
					</view>
				</view>
			</view>
		</up-popup>
		
		<up-popup :show="dragShow" mode='center' bgColor='transparent'>
			<view class="first_bg">
				<view class="fb_cont">
					请根据能够帮助自己记忆作用的大小，从上到下进行排序，操作如下图所示:
				</view>
				<view class="fb_title">
					insteresting
				</view>
				<image src="http://bbsf.oss-cn-shanghai.aliyuncs.com/english/jiword/sort.gif" mode="aspectFit"
					class="fb_img"></image>
				<view class="fb_btn" @click="closedragShow()">
					知道了，去排序
				</view>
			</view>
		</up-popup>
		<up-popup :show="successShow" mode='center' bgColor='transparent'>
			<view class="success_bg">
				<image src="http://bbsf.oss-cn-shanghai.aliyuncs.com/english/jiword/damuzhi.png" mode="" class="damuzhi"></image>
				<view class="success_title">
					你已经完成了单词特殊点拆解啦 快来看看吧！
				</view>
				<view class="flex  paddingLeft-60 paddingRight-60 paddingTop-50 u-flex-between paddingBottom-60">
					<view class="success_list">
						<view class="marginBottom-60 height-120" v-for="(i,v) in successList" :key="v">
							<view v-html="i.wordHead" class="sl_title"></view>
							<view class="success_btn u-line-1" v-if="i.label">
								{{i.label}}
							</view>
						</view>
					</view>
					<view class="success_list">
						<view class="marginBottom-60 height-120" v-for="(i,v) in successList2" :key="v">
							<view v-html="i.wordHead" class="sl_title"></view>
							<view class="success_btn u-line-1" v-if="i.label">
								{{i.label}}
							</view>
						</view>
					</view>
				</view>
				<view class="success_sure" @click="sure()">
					下阶段
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';
	const percentage = ref(10)
	const current = ref(-1)
	const show = ref(false)
	const isShowPage = ref(true)
	const successShow = ref(false)
	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const getWordsSplitApi = inject('getWordsSplit')
	const updateWordScnaApi = inject('updateWordScn')
	const list = ref([])
	const num = ref(1)
	const waitWordcount = ref(0)
	const tran = ref([])
	const wordHead = ref('')
	const id = ref('')
	const tranName = ref('')
	const pos = ref('')
	const item = ref({})
	const firstShow = ref(false)
	const dragShow = ref(false)
	const list2 = ref([])
	const errorshow = ref(false)
	const words_id = ref('')
	const indexNum = ref(0)
	const apart=ref([])
	// 拖拽完成
	function dragComplete(newList, dragItem) {
		console.log(newList, dragItem)
		apart.value=newList
	}
	onLoad((op) => {
		console.log(op)
		page.value = op.page
		big_sort.value = op.big_sort
		small_sort.value = op.small_sort
		// firstShow.value = uni.getStorageSync('threeStageShow')
		console.log(dragShow.value, 112)
		openSuccess()
		getWordsSplitApi({
			page: page.value,
			small_sort: small_sort.value,
			big_sort: big_sort.value
		}).then(res => {
			console.log(res, 106)
			list.value = res.wordList
			if(list.value.length==0){
				successShow.value=true
				console.log(successShow.value)
			}else{
				tran.value = res.wordList[0].chaijie
				waitWordcount.value = res.wordList.length
				wordHead.value = res.wordList[0].wordHead
				words_id.value = res.wordList[0].words_id
				apart.value=res.wordList[0].chaijie
				dragShow.value = uni.getStorageSync('threeStageShow')
			}
			
		})
		
	})
	const hoverClick = (i, v) => {
		console.log(i.status, 8888888888888)
		if (i.status == 1) {
			i.status = 0
		} else {
			i.status = 1
		}
		console.log(i.status)
	}
	const cancel = () => {
		isShowPage.value = true
		show.value = false
	}

	const confirm = () => {
		uni.navigateBack()
	}
	const cancel2 = () => {
		errorshow.value = false
	}
	const SortWordsSplitApi = inject('SortWordsSplit')
	const statWordsSplitApi = inject('statWordsSplit')
	const confirm2 = () => {
		errorshow.value = false
		SortWordsSplitApi({
			words_id: words_id.value,
			apart: '',
		}).then(res => {
			console.log(res, 106)
			indexNum.value++
			num.value++
			if (num.value <= waitWordcount.value) {
				tran.value = list.value[indexNum.value].chaijie
				wordHead.value = list.value[indexNum.value].wordHead
				words_id.value = list.value[indexNum.value].words_id

			} else {
				num.value = waitWordcount.value
				console.log('弹窗')
				openSuccess()
				successShow.value = true
			}
			list2.value = []

		})
	}
	const nextClick = () => {
		dragShow.value = uni.getStorageSync('dragShow')
		list2.value = tran.value.filter(item => item.status == 1);
		console.log(list2.value, 200)
		if (list2.value.length == 0) {
			errorshow.value = true
		}
	}
	const nextClick2 = () => {
		apart.value=list.value[num.value-1].chaijie
		jump()
	}

	const closeFirstShow = () => {
		uni.setStorageSync('threeStageShow', false)
		dragShow.value = false
	}
	const closedragShow = () => {
		uni.setStorageSync('threeStageShow', false)
		dragShow.value = false
	}


	// 离开出现的弹窗
	const beforeleave = (e) => {
		isShowPage.value = false
		show.value = true
		successShow.value = false
	}
	const sure = () => {
		uni.redirectTo({
			url: '/pagesA/reciteWords/wordDesc?big_sort=' + big_sort.value +
				'&page=' + page.value + '&small_sort=' + small_sort.value + '&step=4'
		})
	}

	const title = ref('')
	const successList = ref([])
	const successList2 = ref([])
	const openSuccess = () => {

		statWordsSplitApi({
			page: page.value,
			small_sort: small_sort.value,
			big_sort: big_sort.value
		}).then(res => {
			console.log(res, 264)
			successList.value = res.wordsList1
			successList2.value = res.wordsList2
			title.value = res.title
		})
	}
	const jump = () => {
	
		SortWordsSplitApi({
			words_id: words_id.value,
			apart: apart.value,
		}).then(res => {
			console.log(res, 106)
			indexNum.value++
			num.value++
			if (num.value <= waitWordcount.value) {
				tran.value = list.value[indexNum.value].chaijie
				wordHead.value = list.value[indexNum.value].wordHead
				words_id.value = list.value[indexNum.value].words_id
				apart.value=[]
			} else {
				num.value = waitWordcount.value
				successShow.value = true
				openSuccess()
				console.log('弹窗')
			}
		})
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.head_title {
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			padding: 40rpx 0 32rpx 0;
		}

		.line_progress {
			width: 598rpx;
			height: 8rpx;
			background: #EBEBEB;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
		}

		.line_num {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #51D580;
			margin-left: 40rpx;
		}

		.box {
			padding: 32rpx;

			.box_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 60rpx;
				color: #333333;
				line-height: 70rpx;
				text-align: center;
				padding: 100rpx 0;
			}

			.box_list {
				width: 292rpx;
				padding: 0 10rpx;
				height: 100rpx;
				background: #EBEBEB;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				line-height: 100rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin-right: 15rpx;
				margin-bottom: 20rpx;
			}

			.hover_list {
				background: #51D580;
				color: #FFFFFF;
			}
		}

		.pos {
			position: fixed;
			bottom: 36rpx;
			left: 24rpx;

			.warn {
				padding: 0 104rpx 24rpx;

				.warn_img {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				.warn_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					flex: 1;

					text {
						color: #666666;
					}
				}
			}

			.btn {
				width: 702rpx;
				height: 104rpx;
				background: #51D580;
				border-radius: 92rpx 92rpx 92rpx 92rpx;
				line-height: 104rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.popup_bg {
			width: 610rpx;
			height: 500rpx;
			background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
			background-size: 100% 100%;

			.popup_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 52rpx;
				color: #FFFFFF;
				text-align: center;
				padding-top: 20rpx;
			}

			.popup_pro {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				width: 504rpx;
				height: 100rpx;
				margin: 120rpx auto 0;
			}

			.popup_cancel {
				width: 252rpx;
				height: 92rpx;
				background: #CCCCCC;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				text-align: center;
				line-height: 92rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.popup_sure {
				width: 252rpx;
				height: 92rpx;
				background: #51D580;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 92rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.popup_see {
				width: 526rpx;
				height: 92rpx;
				background: #51D580;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				text-align: center;
				line-height: 92rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 92rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

		}
	}

	.first_bg {
		width: 574rpx;
		height: 898rpx;
		background: #FFFFFF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;

		.fb_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			padding-top: 28rpx;
			text-align: center;
		}
		.fb_cont{
			width: 400rpx;
			padding-top: 40rpx;
			margin: 0rpx auto;
			color: #999;
			font-size: 26rpx;
		}
		.fb_img {
			width: 574rpx;
			height: 494rpx;
			display: block;
			margin: 0rpx auto;
		}

		.fb_btn {
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}

	.success_bg {
		width: 574rpx;
		// height: 1318rpx;
		padding: 30rpx 0;
		background-color: #fff;
		// background: url('http://bbsf.oss-cn-shanghai.aliyuncs.com/english/jiword/splitfinish.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 45rpx;
		position: relative;
		.damuzhi{
			width: 574rpx;
			position: relative;
			top: -150rpx;
			height: 240rpx;
		}
		.success_title {
			width: 400rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin: 0 auto;
			margin-top: -150rpx;
		}

		.success_list {
			width: 46%;

			.success_btn {
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				padding: 0 20rpx;
				max-width: 140rpx;
				background: #666666;
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				margin-top: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
			}

			.sl_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				padding-left: 20rpx;
			}
		}

		.success_sure {
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			position: absolute;
			bottom: 20rpx;
			left: 24rpx;
		}
	}
</style>